<template>
	<view class="body-class">
		<view class="cu-bar search bg-white">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input type="text" v-model="key" placeholder="搜索商品名称" confirm-type="search"></input>
			</view>
			<img v-if="key.length>0" @click="deletePhone()" class="cuIcon-gb-ioc" src="../../static/gb.png">
			<view class="action">
				<button class="cu-btn bg-green shadow-blur round" @click="list(phone)">查询</button>
			</view>
		</view>

		<!-- 订单列表 -->
		<view class="card-list">

			<view class="order-card" v-if="orders.length>0" v-for="(item,index) in orders"
				@click="tzclickxq(item.orUuid)">
				<!-- 标题-->
				<view class="bt-card">
					<img class="ioc-card"
						src="http://t14.baidu.com/it/u=350368832,1128998186&fm=224&app=112&f=JPEG?w=500&h=500">
					<span>充宝宝商城</span>
					<!-- 状态 -->
					<text>{{item.orStatusString}}</text>
				</view>
				<!-- 商品 -->
				<view class="shop-class">
					<img class="shop-img" :src="item.cbbSortEntity.stBackgroundImage">
					<span class="shop-order">
						<!-- 商品名称-->
						<text class="shop-name">{{item.orSpName}}</text>
						<text class="price-shop">￥{{item.orPlayPrice}}</text>
						<view class="shop-name-text">{{item.cbbSortEntity.stProductSpecifications}}{{item.orPlayPrice}}元
						</view>
						<view class="bq-zc-class">账号直充</view>

						<text class="price-sxfk">付款￥{{item.orPlayPrice}}</text>
						<!-- 立即支付 -->
						<button class="play-button" v-if="item.orStatus==0">立即支付</button>

					</span>
				</view>
			</view>
			<br><br>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				img: "https://gitee.com/CodeLiQing/notes-collection/raw/master/%E4%B8%AA%E4%BA%BA%E7%AE%80%E5%8E%86/6a83bc86-bc05-483b-99c2-8aea5eb9bd27.png",
				url: this.$url + "/frontend",
				orders: [],
				key: "",
				status: "",
				urId: sessionStorage.getItem("urId"),
			}
		},
		created() {
			if (this.$route.query.status) {
				this.status = this.$route.query.status
			}
			this.list()
		},
		methods: {
			deletePhone() {
				this.key = ""
				this.orders = []
			},
			tzclickxq(id) {
				uni.navigateTo({
					url: '../order-xq/order-xq?uuid=' + id
				});
			},
			list() {
				uni.request({
					url: `${this.url}/order/userId/${this.urId}?status=${this.status}&key=${this.key}`, //仅为示例，并非真实接口地址。
					method: "GET",
					success: (res) => {
						//console.log(res.data.data)
						if (res.data.code == 200) {
							var data = res.data.data.list
							this.orders = data
						} else {
							this.orders = []
						}

					}
				});
			}
		}
	}
</script>

<style scoped>
	.cuIcon-gb-ioc {
		position: absolute;
		width: 15px;
		height: 15px;
		right: 20%;
		margin-right: 20px;
	}

	.play-button {
		position: absolute;
		width: 50%;
		font-size: 10px;
		color: red;
		right: 0%;
		margin-top: 23%;
		border-radius: 20px 20px 20px 20px;
		border: 1px solid red;
		background-color: #ffffff;
	}

	.price-sxfk {
		position: absolute;
		right: 0%;
		margin-top: 3%;
		font-size: 10px;
		color: red;
		font-weight: 1000;
	}

	.bq-zc-class {
		top: 5px;
		position: relative;
		width: 34%;
		color: #9e9e9e;
		font-size: 10px;
		text-align: center;
		background-color: #f9f9f9;
	}

	.shop-name-text {
		position: relative;
		font-size: 10px;
	}

	.price-shop {
		position: absolute;
		right: 0;
	}

	.shop-name {
		position: relative;
		font-size: 10px;
	}

	.shop-order {
		width: 50%;
		margin-left: 5%;
		position: absolute;
	}

	.shop-img {
		position: relative;
		width: 35%;
		border-radius: 10px 10px 10px 10px;
	}

	.shop-class {
		position: relative;
		top: 15%;
		left: 5%;
		;
	}

	.bt-card text {
		position: absolute;
		right: 10%;
		color: red;
		font-size: 13px;
	}

	.bt-card {
		top: 10%;
		position: relative;
		left: 5%;
		;
	}

	.bt-card span {
		position: relative;
		left: 2%;
		;
	}

	.ioc-card {
		position: relative;
		width: 15px;
	}

	.order-card {
		position: relative;
		width: 90%;
		left: 5%;
		margin-top: 5%;
		height: 180px;
		-webkit-box-shadow: 0 0 10px rgba(234, 234, 234, 1.0);
		border-radius: 10px 10px 10px 10px;
		background-color: #ffffff;
	}

	.card-list {
		position: relative;
		width: 100%;
	}

	.body-class {
		position: relative;
		width: 100%;
	}
</style>
